<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-button" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">设备地图</text>
        </div>
        <div class="header-right">
          <view class="header-icon-btn" @click="locate">
            <text class="fas fa-location-arrow"></text>
          </view>
        </div>
      </div>
    </header>

    <!-- 地图区域 -->
    <main class="map-main">
      <view class="map-container">
        <image 
          class="map-image" 
          src="https://design.gemcoder.com/staticResource/echoAiSystemImages/4c42d4ff3cf9f4d7f244748ad646fb0f.png" 
          mode="aspectFill"
        ></image>
        
        <!-- 设备标记点 -->
        <view 
          v-for="(device, index) in allDevices" 
          :key="device.id"
          class="device-marker"
          :class="{ 
            'marker-current': device.id === currentDevice.id,
            'marker-available': device.currentWeight < 50,
            'marker-full': device.currentWeight >= 50
          }"
          :style="{ top: device.mapPosition.top, left: device.mapPosition.left }"
          @click="selectDevice(device)"
        >
          <view class="marker-icon">
            <view class="bucket-mini">
              <view 
                class="bucket-fill-mini" 
                :style="'height: ' + getFillLevel(device) + '%; background-color: ' + getBucketColor(device.currentWeight) + ';'"
              ></view>
            </view>
          </view>
          <view class="marker-label" v-if="device.id === currentDevice.id">
            {{ device.name }}
          </view>
        </view>

        <!-- 地图控制按钮 -->
        <view class="map-controls">
          <view class="map-control-btn" @click="zoomIn">
            <text class="fas fa-plus"></text>
          </view>
          <view class="map-control-btn" @click="zoomOut">
            <text class="fas fa-minus"></text>
          </view>
        </view>
      </view>
    </main>

    <!-- 底部设备详情 -->
    <view class="device-detail-panel">
      <view class="panel-handle"></view>
      <view class="device-detail-content">
        <!-- 设备基本信息 -->
        <view class="device-info-header">
          <view class="device-icon-large">
            <view class="bucket-container-large">
              <view class="bucket-body-large">
                <view 
                  class="bucket-fill-large" 
                  :style="'height: ' + getFillLevel(currentDevice) + '%; background-color: ' + getBucketColor(currentDevice.currentWeight) + ';'"
                ></view>
              </view>
              <view class="bucket-handle-left-large"></view>
              <view class="bucket-handle-right-large"></view>
            </view>
          </view>
          <view class="device-info-text">
            <text class="device-name-large">{{ currentDevice.name }}</text>
            <text class="device-id-large">设备编号: {{ currentDevice.id }}</text>
            <view class="device-status-row">
              <view class="device-status-large" :class="'status-' + currentDevice.status">
                {{ currentDevice.statusText }}
              </view>
              <view 
                v-if="currentDevice.status === 'full'" 
                class="notify-btn"
                @click="setNotification"
              >
                <text class="fas fa-bell"></text>
                <text>清空后通知我</text>
              </view>
            </view>
          </view>
          <view class="device-distance">
            <text class="distance-text">{{ currentDevice.distance }}</text>
          </view>
        </view>

        <!-- 回收价格信息 -->
        <view class="price-info">
          <text class="price-label">回收价格：</text>
          <text class="price-value">{{ currentDevice.price || '0.6' }}元/KG</text>
        </view>

        <!-- 位置信息 -->
        <view class="location-info">
          <text class="fas fa-map-marker-alt location-icon"></text>
          <text class="location-address">{{ currentDevice.location }}</text>
          <view class="navigate-btn" @click="navigate">
            <text>导航</text>
            <text class="fas fa-arrow-right"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 当前选中的设备
      currentDevice: {},
      // 所有设备数据
      allDevices: [
        {
          id: 'ZL-20230512',
          name: '纸壳类回收箱',
          type: 'paper',
          status: 'available',
          statusText: '可使用',
          distance: '500m',
          location: '科技园区A座楼下',
          currentWeight: 12.5,
          maxWeight: 50,
          mapPosition: { top: '30%', left: '40%' }
        },
        {
          id: 'HH-20230428',
          name: '混合类回收箱',
          type: 'mixed',
          status: 'warning',
          statusText: '即将满',
          distance: '850m',
          location: '中央广场西北角',
          currentWeight: 42.5,
          maxWeight: 50,
          mapPosition: { top: '45%', left: '60%' }
        },
        {
          id: 'ZW-20230315',
          name: '织物类回收箱',
          type: 'textile',
          status: 'full',
          statusText: '已满',
          distance: '1.2km',
          location: '幸福小区3号门旁',
          currentWeight: 50,
          maxWeight: 50,
          mapPosition: { top: '60%', left: '30%' }
        },
        {
          id: 'ZL-20230602',
          name: '纸壳类回收箱',
          type: 'paper',
          status: 'available',
          statusText: '可使用',
          distance: '1.5km',
          location: '商业中心B区停车场',
          currentWeight: 20,
          maxWeight: 50,
          mapPosition: { top: '25%', left: '70%' }
        },
        {
          id: 'HH-20230520',
          name: '混合类回收箱',
          type: 'mixed',
          status: 'available',
          statusText: '可使用',
          distance: '2.1km',
          location: '文化公园南门入口',
          currentWeight: 7.5,
          maxWeight: 50,
          mapPosition: { top: '55%', left: '80%' }
        }
      ]
    };
  },
  onLoad(options) {
    // 获取传入的设备ID
    const deviceId = options.deviceId;
    if (deviceId) {
      const device = this.allDevices.find(d => d.id === deviceId);
      if (device) {
        this.currentDevice = device;
      } else {
        this.currentDevice = this.allDevices[0];
      }
    } else {
      this.currentDevice = this.allDevices[0];
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 选择设备
    selectDevice(device) {
      this.currentDevice = device;
    },

    // 获取填充高度百分比
    getFillLevel(device) {
      return Math.round((device.currentWeight / device.maxWeight) * 100);
    },

    // 获取桶装图标填充颜色
    getBucketColor(currentWeight) {
      if (currentWeight >= 50) {
        return '#f53f3f'; // 红色 - 满载
      } else {
        return '#52c41a'; // 绿色 - 未满
      }
    },

    // 定位功能
    locate() {
      uni.showToast({
        title: '定位中...',
        icon: 'loading'
      });
      setTimeout(() => {
        uni.showToast({
          title: '定位成功',
          icon: 'success'
        });
      }, 1500);
    },

    // 地图放大
    zoomIn() {
      uni.showToast({
        title: '地图放大',
        icon: 'none'
      });
    },

    // 地图缩小
    zoomOut() {
      uni.showToast({
        title: '地图缩小',
        icon: 'none'
      });
    },

    // 导航功能
    navigate() {
      uni.showModal({
        title: '导航',
        content: `是否导航至${this.currentDevice.name}？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '导航功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },

    // 设置清空后通知
    setNotification() {
      uni.showModal({
        title: '设置通知',
        content: `是否在${this.currentDevice.name}清空后通知您？`,
        success: (res) => {
          if (res.confirm) {
            // 这里可以调用API设置通知
            uni.showToast({
              title: '通知设置成功',
              icon: 'success'
            });
            // 可以在这里更新设备状态或添加通知标记
          }
        }
      });
    },


  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-button .fas {
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  font-size: 28rpx;
}

/* 地图主区域 */
.map-main {
  padding-top: 100rpx;
  height: 70vh;
}

.map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 设备标记点 */
.device-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

.marker-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.marker-current .marker-icon {
  width: 80rpx;
  height: 80rpx;
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.4);
  border: 4rpx solid #1890ff;
}

.marker-label {
  margin-top: 8rpx;
  padding: 4rpx 12rpx;
  background-color: #1890ff;
  color: #fff;
  font-size: 22rpx;
  border-radius: 20rpx;
  white-space: nowrap;
}

/* 迷你桶装图标 */
.bucket-mini {
  position: relative;
  width: 24rpx;
  height: 28rpx;
  background-color: #f0f0f0;
  border: 2rpx solid #d0d0d0;
  border-radius: 0 0 4rpx 4rpx;
  overflow: hidden;
}

.bucket-fill-mini {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 0.3s ease;
  border-radius: 0 0 2rpx 2rpx;
}

.marker-current .bucket-mini {
  width: 32rpx;
  height: 36rpx;
}

/* 地图控制按钮 */
.map-controls {
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.map-control-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  font-size: 28rpx;
}

/* 底部设备详情面板 */
.device-detail-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 50;
}

.panel-handle {
  width: 80rpx;
  height: 8rpx;
  background-color: #e0e0e0;
  border-radius: 4rpx;
  margin: 20rpx auto;
}

.device-detail-content {
  padding: 0 30rpx 40rpx;
}

/* 设备信息头部 */
.device-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.device-icon-large {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

/* 大号桶装图标 */
.bucket-container-large {
  position: relative;
  width: 72rpx;
  height: 80rpx;
}

.bucket-body-large {
  position: relative;
  width: 56rpx;
  height: 64rpx;
  background-color: #f0f0f0;
  border: 4rpx solid #d0d0d0;
  border-radius: 0 0 8rpx 8rpx;
  overflow: hidden;
  margin: 0 auto;
}

.bucket-fill-large {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: all 0.3s ease;
  border-radius: 0 0 4rpx 4rpx;
}

.bucket-handle-left-large,
.bucket-handle-right-large {
  position: absolute;
  top: 16rpx;
  width: 8rpx;
  height: 24rpx;
  background-color: #d0d0d0;
  border-radius: 4rpx;
}

.bucket-handle-left-large {
  left: -4rpx;
}

.bucket-handle-right-large {
  right: -4rpx;
}

.bucket-body-large::before {
  content: '';
  position: absolute;
  top: -8rpx;
  left: -4rpx;
  right: -4rpx;
  height: 8rpx;
  background-color: #d0d0d0;
  border-radius: 4rpx 4rpx 0 0;
}

.device-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.device-name-large {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.device-id-large {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
}

.device-status-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.device-status-large {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: inline-block;
}

.notify-btn {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 6rpx 12rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 16rpx;
  font-size: 22rpx;
  transition: all 0.3s ease;
}

.notify-btn:active {
  background-color: #bae7ff;
  transform: scale(0.95);
}

.notify-btn .fas {
  font-size: 20rpx;
}

.status-available {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-warning {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-full {
  background-color: #fff1f0;
  color: #f5222d;
}

.device-distance {
  display: flex;
  align-items: center;
}

.distance-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

/* 回收价格信息 */
.price-info {
  padding: 15rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.price-label {
  font-size: 26rpx;
  color: #666;
}

.price-value {
  font-size: 26rpx;
  color: #52c41a;
  font-weight: 500;
}

/* 位置信息 */
.location-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.location-icon {
  font-size: 28rpx;
  color: #1890ff;
  margin-right: 12rpx;
}

.location-address {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

.navigate-btn {
  display: flex;
  align-items: center;
  color: #1890ff;
  font-size: 26rpx;
  font-weight: 500;
}

.navigate-btn .fas {
  margin-left: 8rpx;
  font-size: 20rpx;
}


</style>